<template>
  <section class="income">
    <el-col :span="24" class="action-bar">
      <span class="task-form-text">返还状态：</span>
      <el-select v-model="searchType" class="action-bar-input" placeholder="请选择">
        <el-option
          v-for="item in searchTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
			<el-button type="primary" size="medium" @click="chamberCommerceFeeReturnList(1,searchType)">筛选</el-button>
      <!-- <el-button type="primary" size="medium" @click="dialogVisible=true">新增</el-button> -->
    </el-col>
    <!--列表-->
		<el-table :data="returnList" highlight-current-row class="el-table-style">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" width="60"/>
      <el-table-column prop="vip_number" label="会员编号" width="220"/>
      <el-table-column prop="realname" label="姓名" width="120"/>
      <el-table-column prop="vip_name" label="会员级别" width="100"/>
      <el-table-column prop="pay_mode" label="缴费类型" width="100"/>
      <el-table-column prop="already_payment" label="已缴费" width="120"/>
      <el-table-column prop="should_payment" label="应缴费" width="180"/>
      <el-table-column prop="has_term_office" label="已任期" width="180"/>
      <el-table-column prop="should_term_office" label="应任期" width="180"/>
      <el-table-column prop="return_amount" label="待返还金额" width="180"/>
      <el-table-column prop="operate_time" label="应返还时间" width="180"/>
      <el-table-column prop="return_time" label="操作时间" width="180"/>
      <el-table-column prop="operate_user" label="经办人" width="180"/>
      <el-table-column prop="pay_type" label="返还支付方式" width="180"/>
      <el-table-column label="返还状态" width="250">
        <template slot-scope="scope">
          <div>
            <div v-show="scope.row.status==0">待返还</div>
            <div v-show="scope.row.status==1">已返还</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showDialog(scope.row)">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination 
					background 
					layout="prev, pager, next" 
					:total="pageTotal"
					:page-size="limit"
					@current-change="chamberCommerceFeeReturnList(searchType)"
				>
				</el-pagination>
      </div>
    </el-col>

        <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      class="editor-dialog"
      @close="initData"
      >
     			<el-form  label-width="120px"  ref="detailForm" label-position="left">
            <el-form-item label="返还状态" prop="nickname">
              <el-select class="action-bar-input" placeholder="待返还"  v-model="member.state" :disabled="changStateFlag">
                <el-option
                  v-for="item in rebackStateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                </el-option>
              </el-select>
              <div style="color:red">返还状态只能修改一次,提交后不得修改</div>
            </el-form-item>
            
            <el-form-item label="支付方式">
            <el-select v-model="member.payType" placeholder="请选择">
              <el-option
                v-for="item in payTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
				  </el-form-item>
            <el-form-item label="经办人" prop="sex">
              <el-input v-model="member.operateUser" auto-complete="off"  style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="操作时间" prop="operate_time">
							<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="member.operateTime" ></el-date-picker>
						</el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="changState">提交</el-button>
			</div>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			returnList:[],
      pageTotal:0,
			limit:16,
      searchType:'',//筛选的状态
      searchTypeOptions:[
        {label:'全部',value:''},
        {label:'已返还',value:'1'},
        {label:'待返还',value:'0'}
      ],
      rebackStateOptions:[//返还状态
        {label:'待返还',value:'0'},
        {label:'已返还',value:'1'},
      ],
      payTypeOptions:[{label:'支付宝',value:'ali'},{label:'微信',value:'wechat'},{label:'现金',value:'cash'},{label:'企业转账',value:'corporate_transfer'},{label:'其他',value:'other'}],//支付方式
      member:{
        id:'',
        state:'',//返回状态
        payType:'',//支付方式
        operateTime:'',//操作时间
        operateUser:''//经办人
      },
      changStateFlag:false,//能否切换返回状态
      dialogVisible:false,//编辑状态的弹窗
		}
  },
  mounted(){
    this.chamberCommerceFeeReturnList();
  },
  methods: {
    showDialog(item){
      //显示弹出框
      this.member.id=item.id;
      this.member.state=item.status;
      if(item.status==1){
        this.changStateFlag=true;//返回状态不能改变
      }else{
        this.changStateFlag=false
      }
      this.member.payType=item.pay_type;
      this.member.operateUser=item.operate_user;
      this.member.operateTime=item.operate_time;
      this.dialogVisible=true
    },
    async changState(){
      //改变返还状态
      let params = {
        id:this.member.id,
        status:this.member.state,
        operate_time:this.member.operateTime,
        operate_user:this.member.operateUser,
        pay_type:this.member.payType
      }
      const res = await this.$api.changeFeeReturnStatus(params);
      if(res.data.level=='success'){
        this.chamberCommerceFeeReturnList();
        this.dialogVisible=false
        this.$message({
          message: res.data.message,
          type: 'success'
        });
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    //获取费用列表
    async chamberCommerceFeeReturnList(page,status){
      let params = {
        status: status || '',
        limit:this.limit,
        page:page || 1,
      }
      const res = await this.$api.chamberCommerceFeeReturnList(params);
      if(res.data.level=='success'){
        let list = res.data.data;      
				this.returnList = list;
				this.pageTotal = res.data.page_info.total
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    initData(){
      this.member={
        id:'',
        state:'',//返回状态
        payType:'',//支付方式
        operateTime:'',//操作时间
        operateUser:''//经办人
      };
      this.changStateFlag=false//能否切换返回状态
    }
  },
}
</script>
<style lang='scss' scoped>
  .income{
    .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .action-bar-searchtime{
        margin-right: 30px;
        .line{
          line-height:40px;
          text-align:center;
        }
      }
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .income .el-dialog__body{overflow: auto;}
</style>
